<div id="ecard_frame">
 <div class="center" style="position:relative;">
	<a href="<?php echo site_url("personalize");?>" id="btn_personalize" class="link_btn">Back</a>
	<a href="#" id="btn_customize" class="link_btn" style="margin-left:150px;">Use this photo</a>
	<form action="<?php echo site_url('castit');?>" method="post" id="usephoto_form">
		<input type="hidden" name="photo_data" id="photo_data" value="<?php echo base_url("content/uploads/".$filename);?>">
	</form>
</div>
	<canvas id="c" width="960" height="640">
		Sorry, your web browser does not support Canvas content.
	</canvas>
   
</div>


<script>
var base_url = "<?php echo base_url();?>";
var filename = "<?php echo $filename; ?>";
var full_path = base_url + 'content/uploads/' + filename;
var canvas_width = 960;
var canvas_height = 480;

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL(full_path, function(img) {	
	var image_width = img.width;
	var image_height = img.height;
	var ratio_width = canvas_width/image_width;
	var ratio_height = canvas_height/image_height;
	console.log(ratio_width + ":" + ratio_height);
	if ( ratio_width > ratio_height )
	{
		canvas.add(img.set({ left: canvas_width/2, top: canvas_height/2, angle: 0 }).scale(ratio_height));
	}
	else
	{
		canvas.add(img.set({ left: canvas_width/2, top: canvas_height/2, angle: 0 }).scale(ratio_width));
	}
	img.hasRotationPoint = false;
});

$("#btn_customize").click(function(){
	if ( $("#photo_data").val() != '' )
	{
		$("#usephoto_form").submit();
	}
	return false;
});
</script>
